<template>
    <div class="wrapper">
        <el-config-provider :locale="zhCn">
            <div class="query-conditions">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="归属街道/乡镇">
                        <el-select v-model="street" class="m-2" placeholder="请选择">
                            <el-option v-for="item in streets" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所在学校">
                        <el-select v-model="school" class="m-2" placeholder="请选择">
                            <el-option v-for="item in schools" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="sex" class="m-2" placeholder="请选择" style="width: 80px">
                            <el-option key="man" label="男" value="man" />
                            <el-option key="female" label="女" value="female" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="年龄段">
                        <el-select v-model="ageRange" class="m-2" placeholder="请选择">
                            <el-option v-for="item in ageRanges" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="name" style="width: 130px" />
                    </el-form-item>
                    <el-form-item label="身份证">
                        <el-input v-model="idNumber" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onQuery">查询</el-button>
                        <el-button type="primary" @click="onExport">导出</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="space"></div>

            <div class="query-result">
                <el-form :inline="true">
                    <el-form-item>
                        <el-button type="primary">新增</el-button>
                        <el-button type="primary">批量导入</el-button>
                        <el-button type="primary" @click="onDeleteSome">删除</el-button>
                    </el-form-item>
                    <el-form-item> 已建档人数：xxx </el-form-item>
                </el-form>

                <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="45" />
                    <el-table-column property="fileNo" label="档案编号" width="120" />
                    <el-table-column property="name" label="姓名" width="120" />
                    <el-table-column property="age" label="年龄" width="70" />
                    <el-table-column property="nationality" label="民族" width="60" />
                    <el-table-column property="school" label="所在学校" width="120" />
                    <el-table-column property="street" label="街道/乡镇" />
                    <el-table-column property="community" label="社区/村" width="200" />
                    <el-table-column property="guardian" label="监护人" width="100" />
                    <el-table-column property="relationship" label="关系" width="80" />
                    <el-table-column property="phone" label="电话" width="115" />
                    <el-table-column property="isDilemma" label="是否困境" width="90" />
                    <el-table-column property="isDisabled" label="是否残疾" width="90" />
                    <el-table-column label="操作" width="160">
                        <template #default="scope"><el-button type="primary" link>详情</el-button>
                            <el-button type="primary" link>更新</el-button>
                            <el-button type="primary" link @click="onDeleteOne">删除</el-button></template>
                    </el-table-column>
                </el-table>
                <div class="el-pagination-container">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 50, 100]" :small="false" :disabled="disabled" :background="true"
                        layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </el-config-provider>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
const street = ref("");
const streets = [
    {
        value: "Option1",
        label: "Option1",
    },
    {
        value: "Option2",
        label: "Option2",
    },
    {
        value: "Option3",
        label: "Option3",
    },
    {
        value: "Option4",
        label: "Option4",
    },
    {
        value: "Option5",
        label: "Option5",
    },
];
const school = ref("");
const schools = [
    {
        value: "Option1",
        label: "Option1",
    },
    {
        value: "Option2",
        label: "Option2",
    },
    {
        value: "Option3",
        label: "Option3",
    },
    {
        value: "Option4",
        label: "Option4",
    },
    {
        value: "Option5",
        label: "Option5",
    },
];
let sex = ref("");
const ageRange = ref("");
const ageRanges = [
    {
        value: "Option1",
        label: "Option1",
    },
    {
        value: "Option2",
        label: "Option2",
    },
    {
        value: "Option3",
        label: "Option3",
    },
    {
        value: "Option4",
        label: "Option4",
    },
    {
        value: "Option5",
        label: "Option5",
    },
];
let name = "";
let idNumber = "";

const tableData = [
    {
        fileNo: "1",
        name: "2016-05-03",
        age: "Tom",
        nationality: "No. ",
        school: "2016-05-03",
        street: "Tom",
        community: "No. 189, Grove St, Los Angeles",
        guardian: "2016-05-03",
        relationship: "Tom",
        phone: "19800000000",
        isDilemma: "否",
        isDisabled: "否",
    },
    {
        fileNo: "2",
        name: "2016-05-03",
        age: "Tom",
        nationality: "No. ",
        school: "2016-05-03",
        street: "Tom",
        community: "No. 189, Grove St, Los Angeles",
        guardian: "2016-05-03",
        relationship: "Tom",
        phone: "19800000000",
        isDilemma: "否",
        isDisabled: "否",
    },
    {
        fileNo: "3",
        name: "2016-05-03",
        age: "Tom",
        nationality: "No. ",
        school: "2016-05-03",
        street: "Tom",
        community: "No. 189, Grove St, Los Angeles",
        guardian: "2016-05-03",
        relationship: "Tom",
        phone: "19800000000",
        isDilemma: "否",
        isDisabled: "否",
    },
    {
        fileNo: "4",
        name: "2016-05-03",
        age: "Tom",
        nationality: "No. ",
        school: "2016-05-03",
        street: "Tom",
        community: "No. 189, Grove St, Los Angeles",
        guardian: "2016-05-03",
        relationship: "Tom",
        phone: "19800000000",
        isDilemma: "否",
        isDisabled: "否",
    },
    {
        fileNo: "5",
        name: "2016-05-03",
        age: "Tom",
        nationality: "No. ",
        school: "2016-05-03",
        street: "Tom",
        community: "No. 189, Grove St, Los Angeles",
        guardian: "2016-05-03",
        relationship: "Tom",
        phone: "19800000000",
        isDilemma: "否",
        isDisabled: "否",
    },
    {
        fileNo: "6",
        name: "2016-05-03",
        age: "Tom",
        nationality: "No. ",
        school: "2016-05-03",
        street: "Tom",
        community: "No. 189, Grove St, Los Angeles",
        guardian: "2016-05-03",
        relationship: "Tom",
        phone: "19800000000",
        isDilemma: "否",
        isDisabled: "否",
    },
    {
        fileNo: "7",
        name: "2016-05-03",
        age: "Tom",
        nationality: "No. ",
        school: "2016-05-03",
        street: "Tom",
        community: "No. 189, Grove St, Los Angeles",
        guardian: "2016-05-03",
        relationship: "Tom",
        phone: "19800000000",
        isDilemma: "否",
        isDisabled: "否",
    },
];

const multipleTableRef = ref();
const multipleSelection = ref([]);

const currentPage = ref(1);
const pageSize = ref(10);
// const small = ref(false);
// const background = ref(true);

const handleSizeChange = (val) => {
    console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`);
};

const handleSelectionChange = (val) => {
    multipleSelection.value = val;
};

const onQuery = () => {

}

const onExport = () => {
    
}

const onDeleteSome = () => {
    if (multipleSelection.value.length === 0) {
        ElMessage({
            message: "请选择要删除的项",
            type: "warning",
        });
    }
};
const onDeleteOne = () => {
    ElMessageBox.confirm(
        '确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '成功删除',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
};
</script>

<style lang="less" scoped>
.wrapper {
    height: 100%;
    background: #fff;
}

.query-conditions {
    padding: 15px;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.m-2 {
    width: 130px;
}

.space {
    height: 10px;
    background: #f0f2f5;
    margin-bottom: 10px;
}

.query-result {
    padding: 15px;
}

.query-result-items {
    display: flex;
    justify-content: space-between;
}

.query-result-item {
    width: 400px;
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
    border-radius: 3px;
    display: flex;
    cursor: pointer;
}

.query-result-item:hover {
    border-color: #409eff;
}

.query-result-item-left {
    width: 150px;
    display: flex;
    align-items: center;
    background: #efefef;

    img {
        width: 100%;
        overflow: hidden;
    }
}

.query-result-item-right {
    flex: 1;
    margin-left: 10px;

    dt {
        font-size: 13px;
        font-weight: bold;
        line-height: 28px;
        color: #333;
    }

    dd {
        font-size: 12px;
        line-height: 26px;
    }
}

.el-pagination-container {
    height: 32px;
    margin-top: 15px;
}

.el-pagination {
    float: right;
}
</style>
